/*
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-09-29 08:39:38
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-10-18 11:38:13
 * @FilePath: /react18-vite-admin/src/views/system/RolesManage/RolesManage.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Form, Input, Table, Select, TreeSelect } from 'antd';

import Button from '@/components/ui/Button/Button';
import CustomCard from '@/components/ui/CustomCard/CustomCard';
import type { RoleListItem } from '@/typings/api/role';

import { useTable } from './useTable';
import EditView from './components/EditView';
import { useEffect } from 'react';

const UsersManage = () => {
    const {
        listParam,
        setListParam,
        getList,
        reset,
        handleEdit,
        columns,
        list,
        loading,
        paginationConfig,
        editNsp,
        setEditNsp,
        afterUpdate
    } = useTable();

    useEffect(() => {
        console.log('角色管理渲染');
    }, []);

    return (
        <div className="page-container">
            <CustomCard title="">
                <Form className="filter-form mb" layout="inline">
                    <Form.Item label="角色名">
                        <Input
                            placeholder="请输入角色名称"
                            value={listParam.name}
                            onChange={(e) =>
                                setListParam((draft) => {
                                    draft.name = e.target.value;
                                })
                            }
                            allowClear={true}
                        />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" onClick={getList}>
                            确定
                        </Button>
                        <Button onClick={reset}>重置</Button>
                        <Button type="success" onClick={() => handleEdit()}>
                            新增
                        </Button>
                    </Form.Item>
                </Form>

                <Table<RoleListItem>
                    columns={columns}
                    dataSource={list}
                    rowKey={(record) => record.id}
                    loading={loading}
                    pagination={paginationConfig}
                ></Table>
            </CustomCard>

            <EditView
                open={editNsp.open}
                id={editNsp.id}
                onClose={() =>
                    setEditNsp((draft) => {
                        draft.open = false;
                    })
                }
                afterSubmit={afterUpdate}
            />
        </div>
    );
};

export default UsersManage;
